import echarts from 'echarts';
import React from 'react';



let data= [
  {name:'夏',value:'500',id:'2'},
  {name:'商',value:'550',id:'3'},
  {name:'周',value:'772',id:'4'},
  {name:'秦',value:'15',id:'5'},
  {name:'汉',value:'426',id:'6'},
  {name:'三国',value:'60',id:'7'},
  {name:'晋',value:'156',id:'8'},
  {name:'南北朝',value:'170',id:'9'},
  {name:'隋',value:'37',id:'10'},
  {name:'唐',value:'290',id:'11'},
  {name:'宋',value:'320',id:'12'},
  {name:'明',value:'320',id:'13'},
  {name:'清',value:'320',id:'1'}
];
let yMax = 1000;
let yData = [];
let xAsixData = [];
let yAsixData = data;
for(let i = 0; i < data.length; i++ ){
  yData.push(yMax);
  xAsixData.push(data[i].name);
}


const dataBd = {
  type: 'bar',
  name:'总年份',
  data: yData,
  itemStyle: {
    normal: {color: 'rgba(0,0,0,0.05)'}
  },
  dimensions:[null],
  tooltip:{
    show: false
  },
  barGap:'-100%',
  barCategoryGap:'40%',
  animation: false
};
const dataRect = {
  type: 'bar',
  data: yAsixData,
  name: '存在时间',
  tooltip:{
    formatter:(params) => {
      return (parseInt(params.data.value) + '年')
    }
  },
  itemStyle: {
    normal: {
      color: new echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        {offset: 0, color: '#83bff6'},
        {offset: 0.5, color: '#188df0'},
        {offset: 1, color: '#188df0'}
      ]
      )
    },
    emphasis: {
      color: new echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        {offset: 0, color: '#2378f7'},
        {offset: 0.7, color: '#2378f7'},
        {offset: 1, color: '#83bff6'}
      ]
      )
    }
  }

};
const dataLine = {
  name:'存在时间',
  type:'line',
  data:yAsixData,
  smooth: true,
  markArea: {
    data: [
      [
        {
          name: '原始社会',
          xAxis: '夏'
        },
        {
          xAxis: '秦'
        }
      ]
    ],
    tooltip:{
      show: false
    }
  },
  markLine:{
    precision:0,
    data:[
      {
        name:'平均存在',
        type:'average'
      }
    ]
  },
  tooltip:{
    formatter:'{b}  :   {c}年'
  }
};


let rectOption = {
  title:{
    text:'年代的比例图'
  },
  tooltip:{
    trigger: 'item',
    axisPointer: {
      type: 'cross',
      label: {
        textStyle: {
          fontStyle: 'italic'
        }
      }
    }
  },
  xAxis:{
    data:xAsixData,
    axisLabel: {
      textStyle: {
        color: '#000'
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 1,
    name:'朝代',
    nameLocation:'end'
  },
  yAxis:{
    axisLabel: {
      textStyle: {
        color: '#999'
      },
      formatter: '{value} 年'
    }
  },
  dataZoom: [
    {
      type:'inside'
    },
    {
      type:'slider'
    }
  ],
  series: [
    dataBd,
    dataRect
  ]
};
let pic = null;

function showTooltip(dataIndex,item) {

}
function hideTooltip(dataIndex) {
  pic.dispatchAction({
    type: 'hideTip'
  });
}

function onPointDragging(dataIndex, dx, dy) {
  let arr = pic.convertFromPixel('grid', this.position);
  yAsixData[dataIndex].value = arr[1];
  pic.setOption(rectOption);
  pic.setOption({
    graphic: echarts.util.map(yAsixData, function (item, dataIndex) {
      return {
        type: 'circle',
        id: dataIndex,
        $action: 'merge',
        position: pic.convertToPixel('grid', [data[dataIndex].name,item.value])
      };
    })
  });
}



class RectPic extends React.Component{
  constructor(props){
    super(props);
  }

  componentDidMount(){
    pic = echarts.init(document.getElementsByClassName("can")[0]);
    pic.setOption(rectOption);
  }

  changeType(param){
    pic.clear();
    rectOption.series = [];
    rectOption.series.push(dataBd);
    if(param == 2){
      rectOption.series.push(dataLine);
      pic.setOption(rectOption,true);
    }else if(param == 3) {
      rectOption.series.push(dataRect);
      rectOption.series.push(dataLine);
      pic.setOption(rectOption,true);
    }else {
      rectOption.series.push(dataRect);
      pic.setOption(rectOption,true);
    }
    pic.setOption({
      graphic: echarts.util.map(yAsixData, (item, dataIndex)=> {
        return {
          type: 'circle',
          id: dataIndex,
          position: pic.convertToPixel('grid', [data[dataIndex].name,item.value]),
          shape: {
            cx: 0,
            cy: 0,
            r: 20
          },
          style:{
            fill:'#38d'
          },
          tooltip:{
            show: true,
            formatter: ()=>{
              return  parseInt(item.value) +'年'
            }
          },
          draggable: true,
          invisible:true,
          ondrag: echarts.util.curry(onPointDragging, dataIndex),
          z: 100
        };
      })
    });
  }

  render(){
    let demo = (
    <div className="rect">
      <button onClick={this.changeType.bind(this,'1')}>柱状图</button>
      <button onClick={this.changeType.bind(this,'2')}>线性图</button>
      <button onClick={this.changeType.bind(this,'3')}>合并</button>
      <div className="can" style={{ width: 800 +"px", height : 500 + "px"}}>

      </div>
    </div>
    );

    return demo
  }

}
export  default RectPic;